<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="../css/register.css">
    <title>注册页面</title>
</head>

<body>
    <div id="app">
        <div id="container">
            <form action="" autocomplete="off">
                <h2>注册页面</h2>
                <div><label for="phoneNumber">手机号:</label>
                    <input type="text" name="phoneNumber" v-model.lazy="phoneNumber" @change="checkPhone"
                        placeholder="请输入手机号">
                    <br>
                    <span v-if="checkPhoneOK">"手机号格式正确"</span>
                    <span v-if="checkPhoneNotOK">"手机号格式错误"</span>
                </div>
                <div>
                    <label for="password">密码:</label>
                    <input type="password" name="password" v-model.lazy="password" @change="checkPassword"
                        placeholder="请输入密码">
                    <br>
                    <span v-if="checkPasswordOK">"密码格式正确"</span>
                    <span v-if="checkPasswordNotOK">"密码格式错误"</span>
                </div>
                <div>
                    <label for="confirmPassword">确认密码:</label>
                    <input type="password" name="confirmPassword" v-model.lazy="confirmPassword"
                        @change="checkPasswords" placeholder="确认密码">
                    <br>
                    <span v-if="PasswordOK">"两次密码一致"</span>
                    <span v-if="PasswordNotOK">"两次密码不一致"</span>
                </div>
                <div><button type="submit" @click="alert">注册</button></div>
                </table>
            </form>
        </div>
    </div>
</body>
<!-- <script src="../js/register.js"></script> -->
<script>
    let app = new Vue({
        el: "#app",
        data: {
            phoneNumber: "",
            checkPhoneOK: false,
            checkPhoneNotOK: false,
            password: "",
            checkPasswordOK: false,
            checkPasswordNotOK: false,
            confirmPassword: "",
            PasswordOK:false,
            PasswordNotOK:false,
        },
        methods: {
            checkPhone: function () {
                // if(this.phoneNumber = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/) this.checkPhoneOK = true;
                // else this.checkPhoneOK = false;
                const reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                if (reg.test(this.phoneNumber)) this.checkPhoneOK = true, this.checkPhoneNotOK = false;
                else this.checkPhoneOK = false, this.checkPhoneNotOK = true;
            },
            checkPassword: function () {
                let reg2 = /^[a-zA-Z]{1}/;
                // if(reg2.test(this.password) && this.password.length >8) this.checkPasswordOK = true;
                // else this.checkPasswordNotOK = true;
                if (this.password.length > 8 && reg2.test(this.password)) {
                    this.checkPasswordNotOK = false;
                    this.checkPasswordOK = true;
                } else {
                    this.checkPasswordOK = false;
                    this.checkPasswordNotOK = true;
                }
            },
            checkPasswords: function () {
                if (this.confirmPassword == this.password) {
                    this.PasswordOK = true;
                    this.PasswordNotOK = false;
                } else {
                    this.PasswordNotOK = true;
                    this.PasswordOK = false;
                }
            },
            alert:function() {
                if(this.checkPhoneOK == true && this.checkPasswordOK == true && this.PasswordOK == true) {
                    window.alert('注册成功！');
                }
                else {
                    window.alert('注册失败！请检查手机号和密码格式是否正确！');
                }
            }
        }
    })
</script>

</html>